<template>
  <div>
    <div class="header">
      <button @click="showSelectCity">
        <div id="adcode"></div>
        {{ cityName }} <van-icon name="arrow-down" />
      </button>

      <van-search
        @click-input="router.push('/search')"
        style="flex: 1; margin-right: 10px; padding-right: 0"
        shape="round"
        placeholder="搜索驾校"
      ></van-search>

      <i class="iconfont icon-lingdang"></i>
    </div>

    <!-- 广告图 -->
    <van-swipe
      class="my-swipe"
      show-indicators
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        class="my-swipe-item"
        v-for="(item, i) in SwiperArr"
        :key="i"
      >
        <img
          style="width: 100%; height: 150px; object-fit: cover"
          class="swipe-img"
          :src="item"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航栏 -->
    <ul class="nav" id="list">
      <li @click="$router.push('/SchoolRanking')">
        <img src="@/assets/icon_baoming/icon_grid/冠军奖杯.png" alt="" />
        <span>驾校排行</span>
      </li>
      <li @click="$router.push('/coachRanking')">
        <img src="@/assets/icon_baoming/icon_grid/排行榜.png" alt="" />
        <span>教练排行</span>
      </li>
      <li @click="$router.push('/cartMap')">
        <img src="@/assets/icon_baoming/icon_grid/地图.png" alt="" />
        <span>地图学车</span>
      </li>
    </ul>
    <div class="jxlist" id="box">
      <van-sticky>
        <van-dropdown-menu>
          <van-dropdown-item
            ref="itemLicenceType"
            @open="ScrollTop(324, 200)"
            title="驾驶类型"
            class="selectTag"
          >
            <div class="typeTag">
              <div class="tag">
                <h4>驾照类型</h4>
                <ul class="taglist">
                  <li
                    @click="selectLicence(item.license_type)"
                    :class="{ active: isLicence == item.license_type }"
                    v-for="(item, i) in licenseArr"
                    :key="item.license_id"
                  >
                    {{ item.license_type }} {{ item.license_text }}
                  </li>
                </ul>
              </div>
            </div>
          </van-dropdown-item>
          <!-- 附近 -->
          <van-dropdown-item
            @open="ScrollTop(324, 200)"
            v-model="nearby"
            :options="nearbyOption"
            @change="distanceOption"
          ></van-dropdown-item>
          <!-- 排序优先 -->
          <van-dropdown-item
            @open="ScrollTop(324, 200)"
            v-model="sort"
            :options="sortOption"
            @change="sortOptionChange"
          ></van-dropdown-item>
          <van-dropdown-item
            title="筛选"
            @open="ScrollTop(324, 200)"
            class="selectTag"
            ref="itemLabel"
          >
            <div class="selectTOP">
              <div class="tag">
                <h4>驾校标签</h4>
                <ul class="taglist">
                  <li
                    @click="selectType(item.school_label)"
                    :class="{ active: islabel == item.school_label }"
                    v-for="item in typeArr"
                    :key="item.school_label_id"
                  >
                    {{ item.school_label }}
                  </li>
                </ul>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-sticky>
      <van-pull-refresh
        v-model="refreshing"
        success-text="刷新成功"
        @refresh="onPullRefresh"
      >
        <van-list
          :immediate-check="false"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :disabled="!isInitOK"
        >

          <JiaxiaoItem
            v-for="item in SchoolList"
            :items="item"
            :key="item.school_id"
          ></JiaxiaoItem>
          <van-empty description="加载中" v-show="!SchoolList.length && !finished"></van-empty>
          <van-empty image="network" description="暂无数据" v-show="!SchoolList.length && finished" />
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 高德地图城市选择器 -->
    <div id="container" class="red"></div>
    <!-- 回顶按钮 -->
    <van-back-top bottom="60px" style="opacity: 0.6" />
    <!-- //撑开底部 -->
    <div style="height: 50px"></div>
    <!-- 遮罩层 -->
    <van-overlay class="overlay" :show="!user_lng" @click="show = false" />
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";

import { shallowRef } from "@vue/reactivity";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import JiaxiaoItem from "@/components/JiaxiaoItem.vue"; //驾校列表组件

import httpApi from "@/http";
import { useStore } from "vuex"; // 引入useStore 方法
const store = useStore(); // 该方法用于返回store 实例
const typeArr = reactive([]); //标签数组
const licenseArr = reactive([]); //驾照类型数组
const router = useRouter();
const map = shallowRef(null);

let self = ref(null); //用于存储cityPicker对象

let cityCode = ref(null);
let cityName = ref(null);
let user_lat = ref(null);
let user_lng = ref(null);
let IpResult = ref(null);
const isInitOK=ref(false)  //初始化驾校列表前,禁止滚动加载开关条件
const initLocation = () => {
  console.log("高德");
  AMapLoader.load({
    key: "f7b50324c82e371d4b319189fc3f48b4", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.CitySearch", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      //重点就是这个
      version: "1.1",
      plugins: ["misc/MobiCityPicker"], //SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
    },
  })
    .then((AMap) => {
      console.log(!store.state.userLocation);
      if(!store.state.userLocation){
        getLocation(); //精确定位
      }else{
        user_lng.value=store.state.userLocation[0]
        user_lat.value=store.state.userLocation[1]
        cityName.value=store.state.userCityName
        console.log(store.state.userCityName);
        
        initList(); //初始化驾校列表
      }
      
      selectCity(); //加载高德地图城市选择器
    })
    .catch((e) => {
      console.log(e);
    });
};
function getLocation() {
  AMap.plugin("AMap.Geolocation", function () {
    var geolocation = new AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 2000,
    });
    //进行IP城市查询
    geolocation.getCityInfo(function (status, result) {
      if (status == "complete") {
        //存储当前定位的城市信息
        console.log("IP定位", result);
        cityName.value = result.city;
        store.commit('getCityName',result.city)
        cityCode.value = result.adcode;
        IpResult.value = result.position;
        console.log("进行IP城市查询", cityName.value, cityCode.value);
      } else {
        onError(result);
      }
    });
    //获取用户当前的精确位置信息(经纬度)
    geolocation.getCurrentPosition(function (status, result) {
      if (status == "complete") {
        onComplete(result);
        console.log(result);
      } else {
        onError(result);
      }
    });
  });
  //定位错误，使用另一方式定位
  function onError(data) {
    console.log("如果无法获得精确定位,调用IP定位的经纬度", data);
    if (data.status == 1) {
      //精确定位不成功,采用上方IP查询的经纬度
      user_lng.value = IpResult.value[0];
      user_lat.value = IpResult.value[1];
      store.commit("getUserLocation", [user_lng.value, user_lat.value]); //存储定位信息到全局VUEX中
      console.log("IP定位的经纬度", [user_lng.value, user_lat.value]);

      initList(); //初始化驾校列表
    }
  }
}
/* 轮播图请求 */
const SwiperArr = reactive([]);
const singUpSwiper = () => {
  let params = { carousel_id: 2 };
  httpApi.schoolApi.singUpSwiperHttp(params).then((res) => {
    console.log("轮播图", res);

    SwiperArr.splice(
      0,
      SwiperArr.length,
      ...res.data.data.result[0].carousel_image.split(";")
    );
    console.log(SwiperArr);
  });
};

/* 处理列表的触底加载 */
let onLoadSortHttp = ref(false); //触底加载请求分类 类型优先  //口碑优先 距离优先
let onLoaddistanceHttp = ref(false); //触底加载请求分类 附近及Km内 列表

const loading = ref(false);
const finished = ref(false);
//初始化驾校列表
const SchoolList = reactive([]);
const initList = function () {
  let page = Math.floor(SchoolList.length / 6) + 1;
  let params = {
    page: page,
    pagesize: 6,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  // 先去缓存中寻找，是否已经存过，如果有就不发请求了
  let str = localStorage.getItem('initList');
  if(str!=null){
    let data=JSON.parse(str);
    isInitOK.value=true //初始化列表后 可以滚动加载 条件
    SchoolList.splice(0, SchoolList.length, ...data);
    return
  }
  
  httpApi.schoolApi.schoolNearestList(params).then((res) => {
    console.log("初始化驾校列表", res);
    SchoolList.splice(0,SchoolList.length,...res.data.data.result);

    // 存储缓存数据
    let value=JSON.stringify(res.data.data.result)
    localStorage.setItem('initList', value);

    isInitOK.value=true //初始化列表后 可以滚动加载 条件


    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
};
const onLoadInitList = function () {
  let page = Math.floor(SchoolList.length / 6) + 1;
  let params = {
    page: page,
    pagesize: 6,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  
  httpApi.schoolApi.schoolNearestList(params).then((res) => {
    console.log("初始化驾校列表", res);
    SchoolList.push(...res.data.data.result);
 


    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
};

/* 驾校标签 */
const getType = () => {
  httpApi.schoolApi.getSchoolType().then((res) => {
    console.log("标签结果", res);
    typeArr.splice(0, typeArr.length, ...res.data.data.result);
  });
};
const islabel = ref(null);
const itemLabel = ref(null);
let onloadByLabelHttp = ref(false); //加载分类令牌 筛选标签的加载请求分类
let once = ref(true);
const selectType = (label) => {
  onLoadByLicenceHttp.value=false
  onLoaddistanceHttp.value = false; //关闭其他类型加载请求
  onLoadSortHttp.value = false; //关闭其他类型加载请求
  onloadByLabelHttp.value = true; //开启 筛选标签的加载请求分类
  islabel.value = label; //存储当前选择标签,以控制高亮标签
  SchoolList.splice(0);
  itemLabel.value.toggle();

  schoolByLabelListHttp(islabel.value);
};

const schoolByLabelListHttp = (label) => {

  let page = Math.floor(SchoolList.length / 8) + 1;
  let params = {
    page: page,
    pagesize: 8,
    label: label,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  httpApi.schoolApi.schoolByLabellList(params).then((res) => {
    console.log("筛选标签列表", res);
    SchoolList.push(...res.data.data.result);

 
    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
};
/* 获取驾照考证类型 */
const getLicense = () => {
  httpApi.schoolApi.getSchoolLicense().then((res) => {
    console.log("驾照类型结果", res);
    licenseArr.splice(0, licenseArr.length, ...res.data.data.result);
  });
};
/* 筛选驾照标签 */
let once1 = ref(true);
const onLoadByLicenceHttp = ref(false);
const isLicence = ref(null);
const itemLicenceType = ref(null);
const selectLicence = (licence) => {
  itemLicenceType.value.toggle();
  onLoadByLicenceHttp.value = true; //开启加载请求分类  驾考筛选
  onLoadSortHttp.value = false;
  onLoaddistanceHttp.value = false;
  onloadByLabelHttp.value = false;

  isLicence.value = licence;
  SchoolList.splice(0);

  schoolByLicenceTypeHttp(isLicence.value);
};

const schoolByLicenceTypeHttp = (licence) => {

  let page = Math.floor(SchoolList.length / 8) + 1;
  let params = {
    page: page,
    pagesize: 8,
    type: licence,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  httpApi.schoolApi.schoolByLicenceTypeList(params).then((res) => {
    console.log("驾考类型", res);
    SchoolList.push(...res.data.data.result);


    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
};

/* 列表排序控制 */
const nearby = ref(0);
const sort = ref("km");

/* 附近 */
const nearbyOption = [
  { text: "附近", value: 0 },
  { text: "3km内", value: 3 },
  { text: "5km", value: 5 },
  { text: "10km", value: 10 },
];

const distanceOption = () => {
  onLoadSortHttp.value = false; //关闭其他类型请求,防止错误请求其他列表
  onloadByLabelHttp.value=false;
  onLoadByLicenceHttp.value=false;
  onLoaddistanceHttp.value = true;
  console.log(nearby.value);
  if (nearby.value == 0) {
    SchoolList.splice(0); //清空列表数据
    schoolNearestHttp(); //默认附近 列表
    return;
  }else if(nearby.value !=0){
    SchoolList.splice(0); //清空列表数据
      schoolDistanceHttp();
  }
  
};
/* 默认排序  */
const sortOption = [
  { text: "距离优先", value: "km" },
  { text: "口碑优先", value: "score" },
];

const sortOptionChange = () => {
  onLoadSortHttp.value = true; //关闭其他类型请求,防止错误请求其他列表
  onloadByLabelHttp.value=false;
  onLoadByLicenceHttp.value=false;
  onLoaddistanceHttp.value = false;
  let sortAttr = sort.value;
  if (sortAttr == "km") {
    SchoolList.splice(0);
    schoolNearestHttp();
  } else if (sortAttr == "score") {
    SchoolList.splice(0);
    schoolScoreHttp();
  }
};
function schoolScoreHttp() {
  let page = Math.floor(SchoolList.length / 8) + 1;
  let params = {
    page: page,
    pagesize: 8,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  httpApi.schoolApi.schoolScoreSort(params).then((res) => {
    console.log("口碑优先", res);
    SchoolList.push(...res.data.data.result);
    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
}
let distance = ref(null);
function schoolDistanceHttp() {
  distance.value = nearby.value;
  console.log(distance.value);
  let page = Math.floor(SchoolList.length / 8) + 1;
  let params = {
    page: page,
    pagesize: 8,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
    distance: distance.value,
  };
  httpApi.schoolApi.schoolDistanceSort(params).then((res) => {
    console.log("附近驾校排序", res);
    SchoolList.push(...res.data.data.result);

    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
}
function schoolNearestHttp() {
  let page = Math.floor(SchoolList.length / 6) + 1;
  let params = {
    page: page,
    pagesize: 6,
    user_lng: user_lng.value,
    user_lat: user_lat.value,
  };
  httpApi.schoolApi.schoolNearestList(params).then((res) => {
    console.log("附近所有驾校", res);
    SchoolList.push(...res.data.data.result);


    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    console.log("附近总和", res.data.data.total);
    finished.value = false; //先加个保险,保证判断之前为false

    if (SchoolList.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
}

/* 筛选滑动过渡 */

const ScrollTop = (number = 0, time) => {
  if (!time) {
    document.body.scrollTop = document.documentElement.scrollTop = number;
    return number;
  }
  const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
  let spacingInex = time / spacingTime; // 计算循环的次数
  let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
  let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
  let scrollTimer = setInterval(() => {
    if (spacingInex > 0) {
      spacingInex--;
      ScrollTop((nowTop += everTop));
    } else {
      clearInterval(scrollTimer); // 清除计时器
    }
  }, spacingTime);
};

function selectCity() {
  /* 高德地图城市选择器 */

  //设置DomLibrary
  // AMapUI.setDomLibrary(Zepto);
  //加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
  AMapUI.loadUI(["misc/MobiCityPicker"], function (MobiCityPicker) {
    var cityPicker = new MobiCityPicker({
      //设置主题（同名的className会被添加到外层容器上）
      theme: "red",
      //topGroups: ..., // 顶部城市列表
    });
    self.value = cityPicker; //存储cityPicker数据 到self里,使用点击显示时间要调用cityPicker下的show方法
    //监听城市选中事件
    cityPicker.on("citySelected", function (cityInfo) {
      cityPicker.hide(); //立即隐藏

      console.log(cityInfo); //选中的城市信息
      user_lng.value = cityInfo.lng;
      user_lat.value = cityInfo.lat;
      store.commit("getUserLocation", [user_lng.value, user_lat.value]); //存储定位信息到全局VUEX中
      SchoolList.splice(0);
      initList();
      cityName.value = cityInfo.name;
    });
    //显示城市列表，可以用某个click事件触发cityPicker.show();
  });
}
const onceDistance=ref(true)
const onceSort=ref(true)
const onceNear=ref(true)
const onceNearby=ref(true)
/* 下拉刷新 */
const refreshing = ref(false);
/* 下拉刷新时会触发 refresh 事件，，操作完成后将 v-model 设置为 false，表示加载完成。 */
const onPullRefresh = () => {
  SchoolList.splice(0)
  refreshing.value = false;
  if (onLoaddistanceHttp.value && nearby.value == 0) {
    schoolNearestHttp();
    refreshing.value = false;
    return;
  } else if (onLoaddistanceHttp.value && nearby.value != 0) {
    if(onceDistance.value){
      onceDistance.value=false
      return
    }
    schoolDistanceHttp()
    refreshing.value = false;
    
    return;
  }
  if (onLoadSortHttp.value && sort.value == "km") {
    if(onceNear.value){
      onceNear.value=false
      return
    }
    schoolDistanceHttp()
    refreshing.value = false;
    return;
  } else if (onLoadSortHttp.value && sort.value == "score") {
    if(onceSort.value){
      onceSort.value=false
      return
    }
    schoolScoreHttp()
    refreshing.value = false;
    return;
  }
  /* 筛选标签 */
  if (onloadByLabelHttp.value) {
    if (once.value) {
      once.value = false;
      return;
    }
    schoolByLabelListHttp(islabel.value);
    refreshing.value = false;
    return;
  }
  if (onLoadByLicenceHttp.value) {
    if (once1.value) {
      once1.value = false;
      return;
    }
    schoolByLicenceTypeHttp(isLicence.value)
    refreshing.value = false;
    return;
  }
  /* 驾照类型 */
  initList();
  refreshing.value = false;


};

const showSelectCity = function () {
  self.value.show();
};


const onLoad = () => {
  if (onLoaddistanceHttp.value && nearby.value == 0) {
    if(onceNearby.value){
      onceNearby.value=false
      return
    }
    schoolNearestHttp();
    return;
  } else if (onLoaddistanceHttp.value && nearby.value != 0) {//3 5 10
    if(onceDistance.value){
      onceDistance.value=false
      return
    }
    schoolDistanceHttp()
    return;
  }

  /* 附近所有 */
  if (onLoadSortHttp.value && sort.value == "km") {
    if(onceNear.value){
      onceNear.value=false
      return
    }
    schoolNearestHttp()
    return;
  } else if (onLoadSortHttp.value && sort.value == "score") {
    if(onceSort.value){
      onceSort.value=false
      return
    }
    schoolScoreHttp()
    return;
  }
  /* 筛选标签 */
  if (onloadByLabelHttp.value) {
    if (once.value) {
      once.value = false;
      return;
    }
    schoolByLabelListHttp(islabel.value);
    return;
  }
  if (onLoadByLicenceHttp.value) {
    if (once1.value) {
      once1.value = false;
      return;
    }
    schoolByLicenceTypeHttp(isLicence.value)
    return;
  }
  /* 驾照类型 */
  onLoadInitList();
};

onMounted(() => {
  initLocation();
  singUpSwiper(); //轮播图
  getType(); //获得标签
  getLicense(); //驾照考证标签
  
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > i {
    margin-left: 10px;
    display: block;
    width: 20px;
  }
}
.nav {
  display: flex;
  height: 80px;
  > li {
    width: 33.33333%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    > img {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
    }
    > span {
      font-size: 16px;
    }
  }
}
/* 轮播图 */
.my-swipe {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

/* 驾校列表 */
.jxlist {
  width: 100%;
  margin-top: 5px;
  padding: 0 10px;
  /* 驾照类型 */
  .typeTag {
    > .tag {
      padding: 0 10px;
      margin-bottom: 10px;
      > h4 {
        font-size: 14px;
        font-weight: bold;
        margin: 8px 0;
      }
      > ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        > li {
          text-align: center;
          line-height: 35px;
          margin-bottom: 10px;
          font-size: 12px;
          border-radius: 100px;
          background-color: #eee;
          width: calc((100% - 10px) / 2);
          &:nth-child(2n + 1) {
            margin-right: 10px;
          }
          &.active {
            color: var(--color-blue-500);
            box-shadow: 0 0 2px 0 rgba(13, 110, 253, 0.8);
            background-color: var(--color-blue-200);
          }
        }
      }
    }
  }
  /* 筛选部分 */
  .selectTag {
    width: 100%;
    .selectTOP {
      overflow-y: scroll;
      > .tag {
        width: 100%;
        margin-bottom: 10px;
        padding: 0 10px;

        //标签类别标题
        > h4 {
          font-size: 14px;
          font-weight: bold;
          margin: 8px 0;
        }
        /* 标签列表 */
        > ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          > li {
            text-align: center;
            line-height: 35px;
            margin-bottom: 10px;
            width: calc((100% - 20px) / 3);
            margin-right: 10px;
            font-size: 12px;
            border-radius: 100px;
            background-color: #eee;

            &:nth-child(3n) {
              margin-right: 0;
            }
          }
          > li.active {
            color: var(--color-blue-500);
            box-shadow: 0 0 2px 0 rgba(13, 110, 253, 0.8);
            background-color: var(--color-blue-200);
          }
        }
      }
    }
    .btnControl {
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      padding: 20px 10px;
      overflow: hidden;
      > button {
        width: 45%;
        border-radius: 100px;
        line-height: 50px;

        text-align: center;
        cursor: pointer;
        &:nth-child(1) {
          background-color: #fff;
          border: 1px solid #aaa;
        }
        &:nth-child(2) {
          background-image: linear-gradient(90deg, #0d6efb, #0a58ca);
          color: #fff;
        }
      }
    }
  }
}
.overlay {
  --van-overlay-background: rgba(0, 0, 0, 0);
}
</style>

<style>
/* 高德地图自定义样式 */

.amap-ui-mobi-city-picker.red {
  background-color: #fff;
  opacity: 1;
}
</style>
